{% include 'public/body.html' %}

{% block title %}

    修改密码
{% endblock %}

{% block main %}
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <div class="upload">
                <h1>修改密码</h1>
                <form action="" method="post">
                    <p>
                        <label>临时密码：</label>
                        <input class="upt" type="password" name="" v-model="tem_password"
                               placeholder="请输入临时密码"/>
                        <em></em>
                    </p>
                    <p>
                        <label>新密码：</label>
                        <input class="upt" type="password" name="" v-model="password"
                               placeholder="请输入新密码"/>
                        <em></em>
                        <span class="source-tag-msg">密码长度为6~20</span>
                    </p>
                    <p>
                        <label>确认密码：</label>
                        <input class="upt" type="password" name="" v-model="confrim_password"
                               placeholder="请再次输入新密码"/>
                        <em></em>
                        <span class="source-tag-msg">两次输入的密码必须保持一致</span>
                    </p>

                    <p><label class="btn"><a class="btn" @click="modify">确认修改</a></label></p>
                </form>
            </div>
        </section>
    </div>

{% endblock %}



{% block vue %}

    <script>
        Vue.createApp({
            data() {
                return {
                    tem_password: '',
                    password: '',
                    confrim_password: '',
                }
            },
            methods: {
                modify() {

                    if (!this.tem_password) {
                        layer.msg('临时密码不能为空', {icon: 5})
                        return
                    }
                    if (!this.password) {
                        layer.msg('新密码不能为空', {icon: 5})
                        return
                    }
                    if (!this.confrim_password) {
                        layer.msg('确认密码不能为空', {icon: 5})
                        return
                    }
                    if (this.password !== this.confrim_password) {
                        layer.msg('两次输入的密码不一致', {icon: 5})
                        return
                    }
                    // 获取 pk
                    let pk = location.pathname.split('/')[2]

                    axios.post(`/modifypass/${pk}/`, {
                        tem_password: this.tem_password,
                        password: this.password,
                        confrim_password: this.confrim_password
                    }, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                        .then(res => {

                            if (res.data.code === 200) {
                                layer.msg('密码修改成功', {icon: 6})
                                setTimeout(() =>
                                        location.href = '/index/'
                                    , 1500)
                            } else {
                                layer.msg(res.data.msg, {icon: 5})
                            }

                        })
                }
            }
        }).mount("#main")

    </script>
{% endblock %}
